<template>
  <a-modal
    ref="excelUploadModalRef"
    v-model:visible="modalVisible"
    :title="t('component.upload.excelUpload.modalTitle')"
    :footer="null"
    :width="800"
    :mask-closable="false"
  >
    <a-upload :remove="handleRemove" :before-upload="beforeUpload">
      <a-space>
        <a-button>
          <upload-outlined></upload-outlined>
          {{ t("component.upload.excelUpload.selectFile") }}
        </a-button>
        <a-button
          type="primary"
          :disabled="selectFile == null"
          :loading="uploading"
          @click.stop="handleUpload"
        >
          {{
            uploading
              ? t("component.upload.excelUpload.uploading")
              : t("component.upload.excelUpload.startUpload")
          }}
        </a-button>
      </a-space>
    </a-upload>

    <a-progress :percent="progressPercent" />
    <div class="excel-upload-message-div">
      <template v-for="(item, index) in messageList" :key="index">
        <span class="excel-upload-message-item-msg">
          {{ index + 1 }} : {{ item.msg }}
        </span>
      </template>
    </div>
  </a-modal>
</template>
<script lang='ts'>
import {
  defineComponent,
  onUnmounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { useI18n } from "vue-i18n";
import { UploadOutlined } from "@ant-design/icons-vue";
import { ExcelUploadProps } from "./interface";
import { FileItem } from "/@/_types/file";
import { newWebSocketInstance } from "/@/kit/web-scoket-kit";
export default defineComponent({
  name: "ExcelUpload",
  props: ExcelUploadProps,
  emits: ["update:visible", "excelUpload"],
  components: { UploadOutlined },
  setup(props, { emit }) {
    const excelUploadModalRef = ref();
    const { t } = useI18n();

    const excelUploadState = reactive({
      socketId: null as string, //socket id
      wsInstance: null as WebSocket, //web socket 实例
      modalVisible: props.visible,
      //上传按钮状态
      uploading: false,
      //选中的文件
      selectFile: null as FileItem,
      messageList: [] as Array<any>, //后台ws推送的数据
      progressPercent: 0,
      //删除选中文件
      handleRemove: () => (excelUploadState.selectFile = null),
      //上传前放入待上传页面
      beforeUpload: (file: FileItem) => {
        excelUploadState.selectFile = file;
        return false;
      },
      //上传excel
      handleUpload: () => {
        excelUploadState.uploading = true;
        //多次上传不产生新的实例
        if (!excelUploadState.wsInstance) excelUploadState.createWebScoket();

        const formData = new FormData();
        formData.append("file", excelUploadState.selectFile as any);
        formData.set("socketId", excelUploadState.socketId);
        emit("excelUpload", formData);
      },
      createWebScoket: () => {
        excelUploadState.socketId = "ws" + new Date().getTime();
        excelUploadState.wsInstance = newWebSocketInstance(
          excelUploadState.socketId,
          {
            onMessage: (data: any) => {
              if (data.percent) excelUploadState.progressPercent = data.percent;
              excelUploadState.messageList.push(data);
            },
          }
        );
      },
    });

    //双向绑定
    watch(
      () => props.visible,
      (val) => (excelUploadState.modalVisible = val)
    );
    watch(
      () => excelUploadState.modalVisible,
      (val) => emit("update:visible", val)
    );

    //销毁事件
    onUnmounted(() => {
      if (excelUploadState.wsInstance) {
        excelUploadState.wsInstance.close();
        excelUploadState.wsInstance = null;
      }
    });
    return {
      excelUploadModalRef,
      t,
      ...toRefs(excelUploadState),
    };
  },
});
</script>
<style lang='less' scoped>
.excel-upload-message-div {
  margin-top: 8px;
  height: 400px;
  overflow: auto;
  border: 1px solid #eee;
  padding: 5px;
}

.excel-upload-message-item-head-blue {
  color: #1890ff;
  border-color: #1890ff;
}
.excel-upload-message-item-head {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 2px solid transparent;
  /* border-radius: 100px; */
}

.excel-upload-message-item-msg {
  display: block;
  font-size: 10px;
}
</style>